<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style type="text/css">
        body{             /*  设置整体的样式 */
			padding-top: 70px;
            height: 100%;
            display: flex;
            justify-content: center;
            background-image: url('./img/a.jpg'); 
            background-size: cover; 
            background-position: center; 
        }
        .form-container {   /*  设置中间的div的样式 */
            width: 100%;
            max-width: 540px;                                                                                         
            background-color: rgba(255, 255, 255, 0.9); 
            padding: 13px;
            border-radius: 10px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
        }
        table {   /*  设置表格的样式 */
            width: 100%;
            border-collapse: collapse; 
        }
        td { /*  设置单元格的样式 */
            padding: 10px;
            text-align: center;
        }
        .col_1{ /*  设置第一列的单元格的宽度 */
            width:30%;
        }
        tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
        tr:nth-child(even) {
            background-color: #e9e9e9;
        }
        input[type="text"], input[type="file"], textarea {
            width: 96%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px; 
        }
        input[type="button"] {
            width: 150px; 
            padding: 10px;
            background-color: #007bff; 
            color: #fff; /* 字体颜色 */
            border: none;
            border-radius: 5px;
        }
        input[type="button"]:hover {
            background-color: #0056b3; 
        }
    </style>
</head>

<body>
    <div class="form-container">
        <form action="#" method="get">
            <table>
                <tr>
                    <td class="col_1">姓名：</td>
                    <td><input type="text" placeholder="请输入姓名" name="name"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" id="">男
                        <input type="radio" name="sex" id="">女
                    </td>
                </tr>
                <tr>
                    <td>生日：</td>
                    <td><input type="text" name="birthday" /></td>
                </tr>
                <tr>
                    <td>手机号：</td>
                    <td><input type="text" placeholder="请输入手机号" name="phone"></td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" name="like"> 旅游
                        <input type="checkbox" name="like"> 运动
                        <input type="checkbox" name="like"> 探险
                        <input type="checkbox" name="like"> 美食
                        <input type="checkbox" name="like"> 学习
                        <input type="checkbox" name="like"> 音乐
                    </td>
                </tr>
                <tr>
                    <td>自我介绍：</td>
                    <td><textarea name="self-introduction" cols="50" rows="6"></textarea></td>
                </tr>
                <tr>
                    <td>上传照片：</td>
                    <td><input type="file" name="img" multiple="multiple"></input></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="提    交">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

</html>